<!DOCTYPE html>
<html lang="zh-CN">
     <style>
          body{
          background-color: #f0f8ff;
          }
          .outer {
          display: flex;
          justify-content: space-between;
          }

          #left {
          flex: 1; /* 主要内容区域占据剩余空间 */
          }

          #sidebar {
          width: 300px; /* 侧边栏固定宽度 */
          }
          .tag-cloud {
            display: flex;
            flex-wrap: wrap;
          }

          .category-widget .widget {
                background-color: #e6f7ff; /* 分类背景颜色 */
          }

          .archive-widget .widget {
                background-color: #f7f7e6; /* 归档背景颜色 */
          }

          .recent-posts-widget .widget {
                background-color: #f7e6f7; /* 近期文章背景颜色 */
          }

          .tag-cloud-widget .widget {
                background-color: #e6ffe6; /* 标签云背景颜色 */
          }

          .tag {
            display: inline-block;
            padding: 5px 10px;
            margin: 5px;
            border: 1px solid #ccc; /* 确保边框颜色和宽度正确 */
            border-radius: 5px;
            text-decoration: none;
            color: #999;
            transition: background-color 0.3s, color 0.3s;
          }

          .tag:hover {
            background-color: #ffcc00;
            color: white;
          }
          #sidebar .ul{
            list-style-type: none; /* 去掉列表符号 */
            padding: 0; /* 去掉默认内边距 */
          }
          #sidebar .li{
            margin-bottom:5px; /* 列表项之间的间距 */

          }
          a.ass{
            color: #333; /* 文字颜色 */
            text-decoration: none; /* 去掉下划线 */
            transition: color 0.3s; /* 平滑过渡 */
          }
          a.ass:hover{
            color: #007bff;
          }
          .d1{
          margin-left: auto;
          }
     </style>
    <head>
        <meta charset="UTF-8">
        <title>{% block title %}{% endblock %}</title>
        <link rel="stylesheet" type="text/css" href="/static/style.css">
        {% block headerjs %}
        {% endblock %}
    </head>
    <body>
            <div id="container">
                    <div id="wrap">

                        <header id="header">
                          <div id="banner"></div>
                          <div id="header-outer" class="outer">
                            <div id="header-inner" class="inner">
                                  <nav id="main-nav">
                                      <a class="main-nav-link" href="{% url 'index' %}">首页</a>
                                      <a class="main-nav-link" href="{% url 'admin:index' %}">CMS</a>
                                      <a class="main-nav-link" href="{% url 'archive_list' %}">归档</a>
                                      {% if request.user.is_authenticated %}
                                          <a class="main-nav-link" href="{% url 'profile' %}">个人管理</a>
                                      {% else %}
                                          <a class="main-nav-link" href="{% url 'register' %}">注册</a>
                                          <a class="main-nav-link" href="{% url 'login' %}">登录</a>
                                      {% endif %}
                                  </nav>
                                  <div class="d1">
                                      <form method="GET" action="https://www.baidu.com/s">
                                        <input type="text" name="wd" placeholder="搜索">
                                      </form>
                                  </div>
                            </div>
                          </div>
                        </header>
                       <div class="outer">
    <div id="left">
        {% block left %}
        {% endblock %}
    </div>
    <aside id="sidebar">
        <!-- 分类 -->
        <div class="widget-wrap category-widget">
            <h3 class="widget-title">分类</h3>
            <div class="widget">
                <ul class="category-list">
                    {% for ap in art_post %}
                    <li class="category-list-item">
                        <a class="category-list-link" href="{% url 'category' ap.category_id %}">{{ ap.category__cname }}</a>
                        <span class="category-list-count">{{ ap.c }}</span>
                    </li>
                    {% endfor %}
                </ul>
            </div>
        </div>

        <!-- 归档 -->
        <div class="widget-wrap archive-widget">
            <h3 class="widget-title">归档</h3>
            <div class="widget">
                <ul class="archive-list">
                    {% for fp in r_file_post %}
                    <li class="archive-list-item">
                        <a class="archive-list-link" href="{% url 'archive' fp.0|date:'Y' fp.0|date:'m' %}">{{ fp.0|date:'Y' }}年{{ fp.0|date:'m' }}月</a>
                        <span class="archive-list-count">{{ fp.1 }}</span>
                    </li>
                    {% endfor %}
                </ul>
            </div>
        </div>

        <div class="widget-wrap recent-posts-widget">
            <h3 class="widget-title">近期文章</h3>
            <div class="widget ">
                <ul>
                    {% if r_rec_post %}
                        {% for rr in r_rec_post %}
                            <li>
                                <a href="{% url 'article_detail' rr.id %}" target="_blank" class="ass">{{ rr.title|truncatechars:10 }}</a>
                            </li>
                        {% endfor %}
                    {% else %}
                    <li>没有近期文章</li>
                    {% endif %}
                </ul>
            </div>
        </div>
        <div class="widget-wrap tag-cloud-widget">
            <h3 class="widget-title">标签云</h3>
            <div class="widget tag-cloud">
                <div>
                    <a href="{% url 'tag_articles' tag='django' %}" class="tag">django</a>
                    <a href="{% url 'tag_articles' tag='python' %}" class="tag">python</a>
                    <a href="{% url 'tag_articles' tag='Java' %}" class="tag">Java</a>
                    <a href="{% url 'tag_articles' tag='新闻' %}" class="tag">新闻</a>
                    <a href="{% url 'tag_articles' tag='文档' %}" class="tag">文档</a>
                    <a href="{% url 'tag_articles' tag='Mysql' %}" class="tag">Mysql</a>
                    <a href="{% url 'tag_articles' tag='CSS' %}" class="tag">CSS</a>
                    <a href="{% url 'tag_articles' tag='JavaScript' %}" class="tag">JavaScript</a>
                    <a href="{% url 'tag_articles' tag='Snippet' %}" class="tag">Snippet</a>
                    <a href="{% url 'tag_articles' tag='jQuery' %}" class="tag">jQuery</a>
                </div>
            </div>
        <script>
            document.addEventListener('DOMContentLoaded', function() {
            const tags = document.querySelectorAll('.tag');
            tags.forEach(tag => {
                tag.addEventListener('click', function(event) {
                    event.preventDefault();
                    this.style.backgroundColor = '#007bff';
                    this.style.color = 'white';
                    // 如果需要跳转到链接，可以在背景色变化后执行
                    setTimeout(() => {
                        window.location.href = this.getAttribute('href');
                    }, 300); // 延迟300毫秒以确保背景色变化效果可见
                });
            });
        });
        </script>
        </div>
    </aside>
</div>

                        <footer id="footer">
  <div class="outer">
    <div id="footer-info" class="inner">
      © Web Blog 22级web班<br>
      Powered by <a href="http://hello123.pythonanywhere.com/#" target="_blank">Hello</a>
      Theme by <a href="http://hello123.pythonanywhere.com/#" target="_blank">Web班</a>
    </div>
  </div>
</footer>

                    </div>
            </div>

    </body>
</html>

